<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>
			/* 1+100取值：选择器被选几率增加  */ 
			di v #d1{
				width: 50%;
				height: 500px;
				/* 颜色色值：透明度  遮罩层  左栏*/
				background: rgba(54, 125, 42, .7);
			}
			/*最大宽度与最小宽度 */
			div#container{
				background-color: aquamarine;
			}
			div.box{
				background-color: aqua;
				color: azure;
				width: 80%;
				min-width: 800px;
				max-width: 1200px;
				/*页面设定最大和最小宽高：约定 移动端宽高比，页面错乱*/
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<!-- 最大宽度与最小宽度：自适应：编写页面在任何浏览器下正常显示 -->
		<div id="container">
			<div class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis aspernatur laborum, vero quod labore odio! Assumenda quibusdam reiciendis rem commodi delectus cupiditate recusandae ea harum! Vel facere reprehenderit neque nihil.
				
			</div>
		</div>
	</body>
</html>